<template>
  <div >
    <div >
      <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#7bbfea"
            text-color="#000000"
            active-text-color="#ffd04b">
      <el-menu-item class="logo" style="padding:0px;margin: 0px;margin-left: 15px;"><router-link to="/">uncle_apathy</router-link></el-menu-item>
            <el-menu-item index="1" style="margin-left: 10px;"><router-link to="/home">文章</router-link></el-menu-item>
            <el-menu-item index="2"><router-link to="/blogType">分类专栏</router-link></el-menu-item>
            <el-menu-item index="3"><router-link to="/blogTag">标签</router-link></el-menu-item>
            <!-- <el-menu-item index="4" disabled><router-link to="/message">留言板</router-link></el-menu-item> -->
            <el-menu-item index="4" disabled>留言板</el-menu-item>
            <el-menu-item index="5"><router-link to="/blogLinks">友链</router-link></el-menu-item>
            <el-menu-item index="6"><router-link to="/test">关于我</router-link></el-menu-item>
            <el-menu-item index="7" v-if="this.$router.currentRoute.path !='/blogSearch/'" style="float:right">
              <div  @click="goToSearch" >
                  <el-input size="small"
                    placeholder="请输入内容"
                    clearable>
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                  </el-input>
              </div>
            </el-menu-item>
      </el-menu>
      
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "Head",
  data() {
    return {
      activeIndex: "",
    };
  },
  props: ["aIndex"],
  mounted() {
    this.activeIndex = this.aIndex;
  },
  methods: {
    blogsearch(keyword) {
      console.log(keyword);
      this.$router.push("/blogSearch/" + keyword);
    },
    // handleSelect(key, keyPath) {
    //   console.log(key, keyPath);
    //   // this.activeIndex = key
    // },
    goToSearch() {
      this.$router.push("/blogSearch/");
    },
  },
};
</script>
  
  <style scoped>
/* logo */
.logo {
  margin-left: 150px;
  font-size: 30px;
  font-family: 华文行楷;
  color: aqua !important;
}
</style>